<template>
  <div class="table-view">
    <h2>表格页面</h2>
    <div class="table-actions">
      <button @click="addRow">添加行</button>
      <button @click="clearTable">清空表格</button>
    </div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>城市</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in tableData" :key="row.id">
          <td>{{ row.id }}</td>
          <td>
            <input v-model="row.name" type="text" />
          </td>
          <td>
            <input v-model.number="row.age" type="number" />
          </td>
          <td>
            <input v-model="row.city" type="text" />
          </td>
          <td>
            <button @click="deleteRow(index)" class="delete-btn">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const tableData = ref([
  { id: 1, name: '张三', age: 25, city: '北京' },
  { id: 2, name: '李四', age: 30, city: '上海' }
])

const addRow = () => {
  const newId = tableData.value.length > 0 
    ? Math.max(...tableData.value.map(row => row.id)) + 1 
    : 1
  tableData.value.push({
    id: newId,
    name: '',
    age: null,
    city: ''
  })
}

const deleteRow = (index) => {
  tableData.value.splice(index, 1)
}

const clearTable = () => {
  tableData.value = []
}
</script>

<style scoped>
.table-view {
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.table-actions {
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

th {
  background-color: #f5f5f5;
}

input {
  width: 100%;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  margin-right: 10px;
  padding: 8px 16px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  opacity: 0.9;
}

.delete-btn {
  background-color: #f44336;
}
</style> 